/*
 * 操作日志列表筛选
 * @Author: ljb
 * @Date: 2018-05-22 15:14:34
 * @Last Modified by: ljb
 * @Last Modified time: 2018-10-19 15:42:29
 */
<template>
	<Form
		ref="formInline"
		inline
		@keydown.native.enter.prevent="confirmSearch">

		<!-- <Form-item
			:label-width="100"
			:label="$t('overall.name')">
			<i-input
				v-model="formValidate.name"
				:placeholder="$t('overall.please_enter_name')"
				name="query__name"/>
		</Form-item> -->

		<Form-item
			:label-width="100"
			:label="$t('operate_log.operator_type')">
			<Select
				v-model="formValidate.operatorable_type"
				clearable
				name="query__status"
				filterable>
				<Option
					v-for="operatorType in operatorTypes"
					:value="operatorType.operatorable_type"
					:key="operatorType.operatorable_type">{{ operatorType.operatorable_type }}</Option>
			</Select>
		</Form-item>

		<Form-item
			v-if="operatorLists.length > 0 && !had_change"
			:label-width="100"
			:label="$t('operate_log.operator')">
			<Select
				v-model="formValidate.operatorable_id"
				clearable
				name="query__status"
				filterable>
				<Option
					v-for="operator in operatorLists"
					:value="operator.id"
					:key="operator.id">{{ operator.name }}</Option>
			</Select>
		</Form-item>

		<Form-item
			:label-width="100"
			:label="$t('operate_log.log_type')">
			<Select
				v-model="formValidate.log_type_id"
				clearable
				filterable>
				<Option
					v-for="log in logTypes"
					:value="String(log.id)"
					:key="log.id">{{ log.name }}</Option>
			</Select>
		</Form-item>

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('operate_log.log_time')" >
			<DatePicker
				:placeholder="$t('common.placeholder',{'field':$t('operate_log.log_time')})"
				name="search-log_time"
				type="daterange"
				placement="bottom-start"
				style="width: 200px"
				@on-change="changeDate"/>
		</Form-item>

		<Form-item>
			<Button
				type="primary"
				name="query__submit"
				@click="confirmSearch">
				{{ this.$t('common.search') }}
			</Button>
		</Form-item>

	</Form>
</template>
<script>

export default {
	name: 'OperateLogSearchForm',
	props: {
		operatorTypes: {
			type: Array,
			default() {
				return [];
			},
		},
		logTypes: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			formValidate: {
				operatorable_type: '', 	// 操作人类别
				operatorable_id: '',	// 操作人的id
				log_type_id: '', 		// 日志类别id
				time_range: [],			// 日志时间区间
			},
			had_change: false,			// 选项是否发生了改变
		};
	},
	computed: {
		isChinese() {
			return this.$i18n.locale === 'zh-CN';
		},
		/**
		 * 操作者下拉选项
		 * @return {Array} {操作者列表数组}
		 */
		operatorLists() {
			const current_operator_type = this.formValidate.operatorable_type;
			const [operator_type] = this.operatorTypes.filter(operatorType => operatorType.operatorable_type === current_operator_type);

			return operator_type ? operator_type.admins : [];
		},
	},
	watch: {
		'formValidate.operatorable_type': function listenType() {
			this.formValidate.operatorable_id = '';
		},
	},
	methods: {

		/**
		 * 改变日期之后触发的回调
		 * @param  {Array} date {日期区间}
		 * @return {undefined}
		 */
		changeDate(date) {
			this.formValidate.time_range = date;
		},

		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch() {
			this.$emit('search', this.formValidate);
		},

	},

};

</script>
